<template>
  <div class="user-management">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>用户管理</span>
        </div>
      </template>
      <div class="content">
        <div class="toolbar">
          <el-button type="primary" @click="handleCreate">新增用户</el-button>
          <el-button @click="handleRefresh">刷新</el-button>
        </div>
        
        <el-tabs v-model="activeTab">
          <el-tab-pane label="用户列表" name="list">
            <el-table :data="users" style="width: 100%" v-loading="loading">
              <el-table-column prop="username" label="用户名" width="150" />
              <el-table-column prop="email" label="邮箱" width="200" />
              <el-table-column prop="organization" label="所属组织" width="180" />
              <el-table-column prop="role" label="角色" width="120">
                <template #default="scope">
                  <el-tag :type="scope.row.role === 'admin' ? 'danger' : scope.row.role === 'manager' ? 'warning' : 'info'">
                    {{ scope.row.role === 'admin' ? '管理员' : scope.row.role === 'manager' ? '经理' : '普通用户' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                    {{ scope.row.status === 'active' ? '正常' : '禁用' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="lastLogin" label="最后登录" width="180" />
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="用户活跃度" name="activity">
            <div class="chart-container">
              <el-card>
                <div ref="activityChartRef" style="width: 100%; height: 400px;"></div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="登录统计" name="loginStats">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">1,234</div>
                    <div class="stat-label">今日登录次数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">892</div>
                    <div class="stat-label">活跃用户数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">92%</div>
                    <div class="stat-label">登录成功率</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('list')
const loading = ref(false)

// 模拟用户数据
const users = ref([
  {
    id: 1,
    username: 'admin',
    email: 'admin@example.com',
    organization: '北京分公司',
    role: 'admin',
    status: 'active',
    lastLogin: '2023-04-15 14:30:22'
  },
  {
    id: 2,
    username: 'manager',
    email: 'manager@example.com',
    organization: '上海分公司',
    role: 'manager',
    status: 'active',
    lastLogin: '2023-04-15 10:15:45'
  },
  {
    id: 3,
    username: 'user',
    email: 'user@example.com',
    organization: '广州分公司',
    role: 'user',
    status: 'inactive',
    lastLogin: '2023-04-14 16:22:18'
  }
])

const activityChartRef = ref()

// 方法
const handleCreate = () => {
  console.log('新增用户')
}

const handleRefresh = () => {
  console.log('刷新用户列表')
}

const handleEdit = (row: any) => {
  console.log('编辑用户', row)
}

const handleDelete = (row: any) => {
  console.log('删除用户', row)
}
</script>

<style scoped>
.user-management {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.toolbar {
  margin-bottom: 20px;
}

.toolbar .el-button {
  margin-right: 10px;
}

.chart-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-top: 20px;
}

.stat-card {
  text-align: center;
}

.stat-item {
  padding: 20px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}
</style>